<template>
  <div class="menu-item-warpper">
    <template v-for="item in menuList">
      <!--
        递归生成菜单的三种情况：
          1.children如果只有1个route，则以这个唯一的子route作为菜单项menuItem,如果是根菜单项,还会在收缩时显示tooltip
          2.children如果>1个route，则以这个route作为根路由，并生成嵌套菜单subMenuItem
          3.没有children时：则直接渲染这个route为菜单项menuItem(不会作用在根菜单项route上，因为必须有children，component必须为Layout,只会作用在二级菜单项上)
       -->

      <ElSubmenu
        v-if="item.children && item.children.length > 1"
        :key="item.path"
        :index="item.path"
        popper-class="aside-menu-popper"
      >
        <template #title>
          <i
            v-if="item.meta.icon && item.meta.icon.substring(0, 3) === 'el-'"
            :class="item.meta.icon"
            class="icon el-icon"
          />
          <Icon
            v-else
            :icon="item.meta.icon"
            class="iconify-icon"
          />
          <span
            v-show="!collapse || !root"
            class="menu-title-text"
          >
            {{ item.meta.title }}
          </span>
        </template>
        <MenuItem
          :menu-list="item.children"
          :base-path="path.resolve(basePath, item.path)"
          :collapse="collapse"
        />
      </ElSubmenu>

      <ElTooltip
        v-else-if="item.children && item.children.length === 1"
        :key="item.children[0].path"
        :disabled="!collapse || !root"
        :content="item.children[0].meta.title"
        placement="right"
      >
        <ElMenuItem
          :index="path.resolve(basePath, item.path, item.children[0].path)"
        >
          <i
            v-if="
              item.children[0].meta.icon &&
                item.children[0].meta.icon.substring(0, 3) === 'el-'
            "
            :class="item.children[0].meta.icon"
            class="icon el-icon"
          />
          <Icon
            v-else
            :icon="item.children[0].meta.icon"
            class="iconify-icon"
          />
          <span
            v-show="!collapse || !root"
            class="menu-title-text"
          >
            {{ item.children[0].meta.title }}
          </span>
        </ElMenuItem>
      </ElTooltip>

      <ElMenuItem
        v-else
        :key="item.path"
        :index="path.resolve(basePath, item.path)"
      >
        <i
          v-if="item.meta.icon && item.meta.icon.substring(0, 3) === 'el-'"
          :class="item.meta.icon"
          class="icon el-icon"
        />
        <Icon
          v-else
          :icon="item.meta.icon"
          class="iconify-icon"
        />
        <span
          v-show="!collapse || !root"
          class="menu-title-text"
        >
          {{ item.meta.title }}
        </span>
      </ElMenuItem>
    </template>
  </div>
</template>
<script>
const path = require('path')
export default {
  name: 'MenuItem',
  props: {
    menuList: {
      type: Array,
      required: true
    },
    basePath: {
      type: String,
      required: true
    },
    collapse: {
      type: Boolean,
      default: false
    },
    // root表示是否侧栏的根菜单项, 当菜单收缩时并且是根菜单项，则不显示字体
    root: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      path
    }
  }
}
</script>
<style lang="scss" scoped>
.menu-title-text {
  color: var(--asideMenuTextColor);
  transition: color $layoutAnimationTime;
}

.icon {
  color: var(--asideMenuIconColor);
  transition: color $layoutAnimationTime;
}

.el-menu-item.is-active {
  background-color: var(--asideMenuActiveBgColor);

  .menu-title-text {
    color: var(--asideMenuActiveTextColor);

  }

  .icon {
    color: var(--asideMenuActiveIconColor);
  }
}

.el-icon {
  font-size: $asideMenuIconSize;
}

.iconify-icon {
  font-size: $asideMenuIconSize * 0.917;
  margin-right: 5px;
}
</style>

<style lang="scss">
.menu-item-warpper {
  // 控制这两个样式还得写在scoped外面，否则&:hover里面的minin无法生效，不知道是否bug
  .el-submenu__title,
  .el-menu-item {
    font-size: $asideMenuFontSize;
    height: $asideMenuItemHeight;
    line-height: $asideMenuItemHeight;

    transition: background-color $layoutAnimationTime;

    &:hover {
      background-color: var(--asideMenuHoverBgColor);

      .menu-title-text {
        color: var(--asideMenuHoverTextColor);

      }

      .icon {
        color: var(--asideMenuHoverIconColor);

      }
    }
  }
}

// 因为是插入到body中,不能在scoped里选中tooltip
.root-menu-tooltip {
  transform: translateX(15px);
}

.aside-menu-popper .el-menu--popup {
  background-color: var(--asideBgColor);

}
</style>
